<!DOCTYPE html>
<html lang="en">
    <head>
        <title>css实现圆环进度条</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            *{padding: 0;margin: 0}
            .circle{
                width: 170px;
                height: 170px;
                position: absolute;
                border-radius: 50%;
                background-color: #fcba66
            }
            .pie-left,.pie-right{
                width: 170px;
                height: 170px;
                position: absolute;
                left: 0;
                top: 0
            }
            .left,.right{
                /* display: block; */
                width: 170px;
                height: 170px;
                background-color: #e2e2e2;
                border-radius: 50%;
                position: absolute;
                left: 0;
                top: 0;
                transform: rotate(0deg);
                transition: 2s;
                -webkit-transition: 2s;
                -moz-transition: 2s;
                -ms-transition: 2s;
            }
            .pie-left,.left{
                clip: rect(0,auto,auto,85px)
            }
            .pie-right,.right{
                clip: rect(0,85px,auto,0)
            }
            .mask{
                width: 126px; height: 126px; 
				border-radius: 50%; 
				left: 50%; 
                top: 50%; 
                background: #FFF; 
                position: absolute; 
				transform: translate(-50%,-50%);
				text-align: center; 
				font-size: 16px; 
				font-size: 16px; 
				display: flex;
				align-content: center;
				justify-content: center;
				flex-direction: column;
            }
        </style>
    </head>
    <body>
        <div class="circle">
            <div class="pie-left">
                <div class="left"></div>
            </div>
            <div class="pie-right">
                <div class="right"></div>
            </div>
            <div class="mask">
                <p><span>80</span>%</p>
                <p>其他信息</p>
            </div>
        </div>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script>
            $(function(){
                $('.circle').each(function(index, el) { 
					var num = $(this).find('span').text() * 3.6; 
					if (num<=180) { 
						$(this).find('.right').css('transform', "rotate(" + num + "deg)"); 
					} else { 
						$(this).find('.right').css('transform', "rotate(180deg)"); 
						$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)"); 
					}; 
				}); 
            })
        </script>
    </body>
</html>